<template>
    <div style="padding: 20px;">
        <el-row :gutter="20">
            <el-form :model="dataForm" ref="baseRef" :rules="rules" label-width="50px" hide-required-asterisk>
                <el-form-item label="账号" prop="user_name">
                    <el-input v-model="dataForm.user_name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="dataForm.password" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :color="buttonColor" style="color: #ffffff" @click="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
import {mapState} from "vuex";
import {apiUserLoginByUserName} from '@/api/index.js'
import {defineComponent, reactive, toRefs, getCurrentInstance} from 'vue'

export default defineComponent({
    name: "userInfo",
    setup(){
        const {proxy} = getCurrentInstance()
        const data = reactive({
            dataForm: {
                user_name: '',
                password: ''
            }
        })

        const rules = reactive({
            user_name: [{required: true, message: '请输入用户名', trigger: blur}, {
                min: 5,
                max: 20,
                message: '请输入正确的用户名',
                trigger: 'blur'
            }],
            password: [{required: true, message: '请输入密码', trigger: blur}]
        })

        const submit = () => {
            proxy.$refs.baseRef.validate((valid) => {
                console.log(valid)
                if (valid) {
                    login(data.dataForm)
                }
            })
        }

        const login = async (query) => {
            let res = await apiUserLoginByUserName(query)
            if (res.status) {
                proxy.$message.success('登陆成功')
            }
        }


        return {
            ...toRefs(data),
            rules,
            submit
        }
    },
    computed: {
        ...mapState(['theme', 'buttonColor'])
    }
})
</script>

<style lang="scss" scoped>
.theme-item {
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;

    div {
        border-radius: 8px;
    }
}
</style>
